<!-- 任务列表 -->
<template>
  <div class='app-container'>
    <div class="edit">
      <div class="model">
        <div class="model-tit">
          <div class="tit1">
            <p class="partnum">型号：</p>
            <p>AD620ARZ</p>
          </div>
          <div class="tit1">
            <p class="num">型号数量：</p>
            <p>10000000</p>
          </div>
          <div class="tit1">
            <p class="num">品牌数量：</p>
            <p>10000000</p>
          </div>
        </div>

        <div class="model-con">
          <div class="context-tit stikytit" id="scrolltop">
            <div class="icon">来源1</div>
            <div class="titbox">
              <div class="source">
              <p class="title">来源：</p>
              <p>人工</p>
            </div>
            <div class="pic">
               <p class="title">图片：</p>
              <img src="./../../assets/images/square1.png" alt=""/>
            </div>
            <div class="btn">
              <p></p>
               <el-button class="btnsum" type="primary" size="medium" @click="onSubmit()">提交</el-button>
            </div>
            </div>
           
          </div>
          <div class="context">
        <div class="left"> 
          <p class="title"><i class="left_line"></i>固定属性</p>
          <!--  :data="tableData" -->
            <el-table
                border
                  :data="tableData"
                  style="width: 95%">
                  <el-table-column
                  align="center"
                    prop="name"
                    label="属性名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                  align="center"
                    prop="origvalue"
                    label="原始值"
                    width="180">
                  </el-table-column>
                  <el-table-column
                  align="center"
                    label="修改值"
                    >
                    <template slot-scope="scope">
                      <div v-if="scope.row.name == '分类'">
                         <el-cascader style="width:100%;" v-model="model.categoryArr" :options="options"  @change="handleChange"  filterable></el-cascader>
                      </div>
                       <div v-if="scope.row.name == '品牌'">
                         <el-cascader style="width:100%;" v-model="model.brand" :options="options" @change="handleChange1" filterable></el-cascader>

                      </div>
                      <div v-if="scope.row.name == '封装'">
                         <el-cascader style="width:100%;" v-model="model.package" :options="options" @change="handleChange2" filterable></el-cascader>

                      </div>
                      <div v-if="scope.row.name == '包装'" >
                         <el-cascader style="width:100%;"  v-model="model.packing" :options="options"  @change="handleChange3" filterable></el-cascader>

                      </div>
                      <div v-if="scope.row.name == 'MPQ'">
                         <el-input style="width:100%;" v-model="model.MPQ" placeholder="请输入MPQ"></el-input>
                      </div>
                      <div v-if="scope.row.name == '描述'">
                         <el-input style="width:100%;" v-model="model.describle" placeholder="请输入内容"></el-input>
                      </div>
                     
                    </template>
                       
                      </el-table-column>
        </el-table>
            </div>
          <div class="right">
          <p class="title"><i class="left_line"></i>动态属性</p>
            <el-table
                border
                  :data="dynamicData"
                  style="width: 98%">
                   <el-table-column
                    width="40" type="index">
                    <template slot-scope="scope">
                      <div  @click="handleIsDisplay(scope.$index, scope.row)">
                         <img src="./../../assets/images/show.png" v-if="scope.row.status" alt=""/>
                        <img src="./../../assets/images/hidden.png" v-if="!scope.row.status"  alt=""/>
                      </div>
                        <!-- <div  v-if="!show">
                         <img src="./../../assets/images/buy6.png" @click="handleIsDisplay(scope.$index, scope.row)" alt=""/>
                      </div> -->

                    </template>

                  
                  </el-table-column>
                  <el-table-column
                    label="属性名称"
                    align="center"
                    width="130">
                    <template slot-scope="scope">
                      <div v-if="scope.row.status === true">{{scope.row.name}}</div>
                      <div v-if="scope.row.status === false">****</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="属行同义词"
                    align="center"
                    width="180">
                     <template slot-scope="scope">
                      <div v-if="scope.row.status === true">{{scope.row.samename}}</div>
                      <div v-if="scope.row.status === false">****</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="原始值"
                    align="center"
                    width="180">
                    <template slot-scope="scope">
                      <div v-if="scope.row.status === true">{{scope.row.origvalue}}</div>
                      <div v-if="scope.row.status === false">****</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="修改值"
                    align="center"
                    >
                    <template slot-scope="scope">
                      <div v-if="scope.row.name == '通道数量'">
                         <el-input style="width:100%;" v-model="model.channel" placeholder="请输入通道数量"></el-input>
                      </div>
                       <div v-if="scope.row.name == '转换速率'">
                         <el-input style="width:100%;" v-model="model.rate"  placeholder="请输入转换速率"></el-input>

                      </div>
                      <div v-if="scope.row.name == '共模抑制比'">
                         <el-input style="width:100%;" v-model="model.cmrr"  placeholder="请输入共模抑制比"></el-input>

                      </div>
                      <div v-if="scope.row.name == '电源电压-最大'">
                         <el-input style="width:100%;"  v-model="model.maxpv"  placeholder="请输入最大电源电压"></el-input>

                      </div>
                      <div v-if="scope.row.name == '电源电压-最小'">
                         <el-input style="width:100%;" v-model="model.minpv" placeholder="请输入最小电源电压"></el-input>
                      </div>
                     
                    </template>
                       
                      </el-table-column>
          </el-table>
          </div>
          </div>
        </div>
        <div class="model-con">
          <div class="context-tit">
            <div class="icon titimg">来源2</div>
            <div class="titbox">
              <div class="source">
              <p class="title">来源：</p>
              <p>非人工</p>
            </div>
            <div class="pic">
               <p class="title">图片：</p>
              <img src="./../../assets/images/square.png" alt=""/>
            </div>
             <div class="btn">
              <p></p>
               <el-button class="btnsum" type="success" size="medium" @click="onUser()">使用</el-button>
            </div>
            </div>
           
          </div>
          <div class="context">
        <div class="left"> 
          <p class="title"><i class="left_line"></i>固定属性</p>
          <!--  :data="tableData" -->
              <el-table
                  border
                  :data="tableData1"
                  :height="tableHeight"
                  style="width: 95%">
                  <el-table-column
                    prop="name"
                    label="属性名称"
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="origvalue"
                    align="center"
                    label="原始值"
                   >
                  </el-table-column>
            
    </el-table>
            </div>
          <div class="right">
          <p class="title"><i class="left_line"></i>动态属性</p>
            <el-table
                border
                 :height="tableHeight"
                  :data="dynamicData"
                  style="width: 98%">
                  <el-table-column
                    prop="name"
                    label="属性名称"
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="origvalue"
                    label="原始值"
                    align="center"
                   >
                  </el-table-column>
              
    </el-table>
          </div>
          </div>
        </div>
      </div>
      
        
      <!-- 型号编辑 -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";


export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      // treeoptions: [],
      // treeprop: { value: 'id', label: 'label', children: 'children' },
      show:true,
      taboffsettop:0,
      scrollTop:0,
      barfixed:false,
       tableData: [{
            name: '分类',
            origvalue: '王s',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '品牌',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '封装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '包装',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: 'MPQ',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          {
            name: '分类',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '品牌',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '封装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '包装',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: 'MPQ',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          {
            name: '分类',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '品牌',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '封装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '包装',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: 'MPQ',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
             name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          ],
      tableData1: [{
            name: '地址',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '分类',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '封装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '包装',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: 'MPQ',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          {
            name: '分类',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '品牌',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '封装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '包装',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: 'MPQ',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          {
            name: '分类',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '品牌',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '封装',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '包装',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          {
            name: 'MPQ',
            origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
           name: '描述',
             origvalue: '王小虎',
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          },
          ],

          dynamicData:[
            {
            name: '通道数量',
            samename: '通道数量',
            origvalue: '王小虎',
            status:true,
            eidtvalue: '上海市普陀区金沙江路 1518 弄'
          }, {
             name: '转换速率',
             samename: '转换速率',
             origvalue: '王小虎',
             status:true,
            eidtvalue: '上海市普陀区金沙江路 1517 弄'
          }, {
            name: '共模抑制比',
            samename: 'cmr-共模抑制比',
             origvalue: '王小虎',
             status:false,
            eidtvalue: '上海市普陀区金沙江路 1519 弄'
          }, {
            name: '电源电压-最大',
            samename: '电源电压-最大',
            origvalue: '王小虎',
            status:true,
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
           {
            name: '电源电压-最小',
            samename: '电源电压-最小',
            origvalue: '王小虎',
            status:false,
            eidtvalue: '上海市普陀区金沙江路 1516 弄'
          },
          ],
          options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
          }],
          model:{
            categoryArr:[],
            brand:[],
            package:[],
            packing:[],
            MPQ:undefined,
            describle:undefined,
            channel:undefined,
            rate:undefined,
            cmrr:undefined,
            maxpv:undefined,
            minpv:undefined,
          },
          tableHeight:400
      
    };
  },
  //监听属性 类似于data概念
  computed: {
     
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
     handleChange(value) {
       console.log(value)
      // this.mode.CategoryArr = this.$refs["classify"].getCheckedNodes()[0].pathLabels;
      
     },
       handleChange1(value) {
      
      //  this.model.brand= this.$refs["brand"].getCheckedNodes()[0].pathLabels;
        console.log(this.model.brand)
     },
       handleChange2(value) {
          // this.model.package = this.$refs["package"].getCheckedNodes()[0].pathLabels;
       console.log(this.model.package)
     },
       handleChange3(value) {
        //  this.model.packing = this.$refs["packing"].getCheckedNodes()[0].pathLabels;
       console.log(this.model.packing)
     },
     handleIsDisplay(index,row){
       if(index == 0){
         row.status = !row.status;
       }
       if(index == 1){
         row.status = !row.status;
       }
       if(index == 2){
         row.status = !row.status;
       }
       if(index == 3){
         row.status = !row.status;
       }
       if(index == 4){
         row.status = !row.status;
       }
     },
      onSubmit(){
       
        console.log(this.model)
      },
      onUser(){
        // this.tableData1.forEach((item,index)=>{
        //  this.model[index] = item.origvalue;
        
        // })
        var i =0;
        for(var key in this.model){
        console.log(this.model[key])
          if( this.model[key] instanceof Array === true){
           
             this.model[key].push(this.tableData1[i].origvalue)
          }else{
             this.model[key]=this.tableData1[i].origvalue;
          }

          i++;
        }
        console.log(this.model)
      }

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // console.log('standard2');
    // console.log(getToken());
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  
     
  },
  destroyed() {
    // window.removeEventListener("scroll",this.handleScroll)
  },
  //beforeCreate() {}, //生命周期 - 创建之前
  //beforeMount() {}, //生命周期 - 挂载之前
  //beforeUpdate() {}, //生命周期 - 更新之前
  //updated() {}, //生命周期 - 更新之后
  //beforeDestroy() {}, //生命周期 - 销毁之前
  //destroyed() {}, //生命周期 - 销毁完成
  //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
@import './../../assets/reset.css';
.edit{
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  .model{
    margin-bottom: 10px;
  }
  .model-tit{
    width: 100%;
    height: 54px;
   background: #F7F8FB;
   border-radius: 2px;
   font-size: 16px;
   color: #666666;
   display: flex;
   justify-content: space-between;
   align-items: center;
  
   .tit1{
     width: 33.3%;
     line-height: 54px;
     display: flex;
     align-items: center;
     .partnum{
       margin-left: 20px;
      //  width: 12%;
       
     }
  
     p:nth-child(2){
       color: #000;
       font-weight: bold;
     }
   }
   

  }
  .model-con{
    margin-top: 20px;
    border: 1px solid #F7F8FB;
    border-radius: 2px;
    padding-bottom: 10px;
    width: 100%;
   
    .context-tit{
      display: flex;
      height: 45px;
      border-bottom: 1px solid #F7F8FB;
      .icon{
        width: 70px;
        height: 28px;
        background-image: url("./../../assets/images/square.png");
        background-size: 100% 100%;
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        padding-left: 10px;
      }
      .titimg{
          background-image: url("./../../assets/images/square1.png");
      }
      .titbox{
        width: 100%;
        display: flex;
        font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
      div{
        width: 33.3%;
        display: flex;
        align-items: center;
        
      }
        .btn{
            // display: flex;
            justify-content: space-around;
            // align-items: center;
        }
      .source{
        padding-left: 4%;
        .title{
          // width: 11%;
        }
      }
      }
    }
    .stikytit{
      width: 100%;
      background: #fff;
       border: 1px solid #F7F8FB;
      position: sticky;
      position: -webkit-sticky;
      top:88px;
      z-index: 999;
    }
    .context{
      width: 100%;
      display: flex;
      .title {
        margin-right: 20px;
        font-weight: bold;
        margin-bottom:20px
    }
    .left{
      width: 50%;
      margin-left: 10px;
      .left_line {
                display: inline-block;
                width: 3px;
                height: 16px;
                background-color: #286af6;
                vertical-align: middle;
                overflow: hidden;
                margin: -3px 4px 0 0;
            }
    }
    .right{
      width: 50%;
      .left_line {
                display: inline-block;
                width: 3px;
                height: 16px;
                background-color: #286af6;
                vertical-align: middle;
                overflow: hidden;
                margin: -3px 4px 0 0;
            }
    }
    }
  }
 
}
</style>